<script>
import { defineComponent, reactive, ref, toRaw } from 'vue'
import { checkFinanceDataList } from '@Config/server/api'
import DataTable from '@Components/dataTable'
import { createPagination, Messages } from '@Config/config'
import { message, Modal } from 'ant-design-vue'
import MakeForm, { MakeFormState } from '@Components/makeForm'
import ColorBlock from '@Components/colorBlock'
import { useUrl, transform_pre_fn } from '@Hooks/url'
import { useRoute } from 'vue-router'
import * as Antd from 'ant-design-vue'
export default defineComponent({
  components: {
    DataTable,
    MakeForm,
    ColorBlock,
  },
  setup(props, context) {
    let form_config = [
      {
        key: 'userName',
        initValue: null,
        uiType: 'input',
        col: { span: 24 },
        formItem: { label: '用户名' },
        attr: { placeholder: '用户名' },
        rule: [
          {
            required: true,
            message: '请输入用户名',
          },
        ],
      },
      {
        key: 'password',
        initValue: null,
        uiType: 'input',
        col: { span: 24 },
        formItem: { label: '密码' },
        attr: { placeholder: '密码' },
        rule: [
          {
            required: true,
            message: '请输入用户名',
          },
          {
            min: 6,
            message: '密码不能少于6位',
          },
        ],
      },
      {
        key: 'phonee',
        initValue: null,
        uiType: 'input',
        col: { span: 24 },
        formItem: { label: '手机号' },
        attr: {
           placeholder: '手机号' },
        rule: [
          {
            required: true,
            message: '请输入用户名',
          },
          {
            min: 11,
            message: '密码不能少于11位',
          },
        ],
      },
      // {
      //   key: 'type',
      //   initValue: 0,
      //   uiType: 'select',
      //   source: TYPE_LIST(),
      //   col: { span: 6 },
      //   formItem: { label: '公告类型' },
      //   attr: { placeholder: '公告类型' },
      // },
      // {
      //   key: 'button',
      //   initValue: null,
      //   uiType: 'custom',
      //   col: { span: 5 },
      //   ui: (
      //     <a-space>
      //       <a-button
      //         type="primary"
      //         onClick={searchHandler}
      //         v-slots={{
      //           icon: () => {
      //             return <SearchOutlined />
      //           },
      //         }}
      //         loading={loading.search_loading}
      //       >
      //         搜索
      //       </a-button>
      //       <a-button
      //         type="primary"
      //         danger
      //         onClick={resetHandler}
      //         v-slots={{
      //           icon: () => {
      //             return <ClearOutlined />
      //           },
      //         }}
      //         loading={loading.search_loading}
      //       >
      //         重置
      //       </a-button>
      //     </a-space>
      //   ),
      // },
    ]
    let form_state = reactive({ data: MakeFormState(form_config) })

    let form_ref = ref(null)

    let registerHandler = () => {
      form_ref.value.validate().then(() => {
        Messages.add(message.success('注册成功'))
        context.emit('close')
      })
    }

    let resetHandler = () => {
      form_ref.value.resetFields()
    }
    return {
      form_config,
      form_state,
      form_ref,
      registerHandler,
      resetHandler,
    }
  },
  render() {
    return (
      <Antd.Row gutter={[20, 20]}>
        <Antd.Col span={24}>
          <MakeForm
            ref="form_ref"
            formConfig={this.form_config}
            value={this.form_state.data}
          />
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Button type="primary" onClick={this.registerHandler}>
              注册
            </Antd.Button>
            <Antd.Button type="primary" danger onClick={this.resetHandler}>
              重置
            </Antd.Button>
          </Antd.Space>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
